<template>
  <div id="mainone" style="width: 80%; height: 570px; margin: 0 auto"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  props: ["myType", "myStart", "myEnd"],
  data() {
    return {
      type: this.myType,
      start: this.myStart,
      end: this.myEnd,
      tabledata: [],
      maintype: [],
    };
  },
  created() {
    if (this.type == 1) {
      console.log("draw benkesheng");
    } else if (this.type == 2) {
      console.log("draw yanjiusheng");
    }

    if (!this.start || !this.end) {
      this.axios({
        url: "grad/yearList",
        methods: "get",
      }).then((res) => {
        let years = res.data.data;

        years = years.sort(function (a, b) {
          return a - b;
        });

        //默认为最近一年
        this.start = years[years.length - 1];
        this.end = years[years.length - 1];
        this.get_industry(this.start, this.end);
      });
    } else {
      this.get_industry(this.start, this.end);
    }
  },
  watch: {
    myType(val) {
      this.type = val;
    },
    myStart(val) {
      this.start = val;
    },
    myEnd(val) {
      this.end = val;
    },
  },
  computed: {
    myChart() {
      return echarts.init(document.getElementById("mainone"));
    },
  },
  methods: {
    count_kind(data) {
      console.log("table4",data);
      var it_count = 0; //it
      var eco_count = 0; //金融
      var society_count = 0; //社会组织
      var sci_count = 0; //科学
      var make_count = 0; //制造业
      var energy_count = 0; //电力
      var edu_count = 0; //教育
      var weisheng_count = 0; //卫生
      var tran_count = 0; //交通
      var resident_count = 0; //居民服务、修理和其他服务业
      var sale_count = 0;
      var living_count = 0;
      var house_count = 0; //房地产
      var cul_count = 0; //文化
      var army_count = 0; //军队
      var nl = 0;
      var sum = 0;

      for (var i in data) {
        var cur = data[i]["term"];
        var num = data[i]["num"];
        if (cur == "信息传输、软件和信息技术服务业") {
          it_count += num;
        } else if (cur == "金融业") {
          eco_count += num;
        } else if (cur == "公共管理、社会保障和社会组织") {
          society_count += num;
        } else if (cur == "科学研究和技术服务业") {
          sci_count += num;
        } else if (cur == "制造业") {
          make_count += num;
        } else if (cur == "电力、热力、燃气及水生产和供应业") {
          energy_count += num;
        } else if (cur == "教育") {
          edu_count += num;
        } else if (cur == "卫生和社会工作") {
          weisheng_count += num;
        } else if (cur == "交通运输、仓储和邮政业") {
          tran_count += num;
        } else if (cur == "居民服务、修理和其他服务业") {
          resident_count += num;
        } else if(cur == "批发和零售业"){
          sale_count += num;
        } else if(cur == "住宿和餐饮业"){
          living_count += num;
        } else if (cur == "房地产业") {
          house_count += num;
        } else if (cur == "文化、体育和娱乐业") {
          cul_count += num;
        } else if (cur == "军队") {
          army_count += num;
        } else if (cur == null) {
          nl += num;
        }
        sum += num;
      }
      // 按照需求排序 big_term term num
      return [
        it_count,
        eco_count,
        society_count,
        sci_count,
        make_count,
        energy_count,
        edu_count,
        weisheng_count,
        tran_count,
        resident_count,
        sale_count,
        living_count,
        house_count,
        cul_count,
        army_count,
      ];
    },
    get_dict(temp) {
      var title = [
        "信息传输、软件和信息技术服务业",
        "金融业",
        "公共管理、社会保障和社会组织",
        "科学研究和技术服务业",
        "制造业",
        "电力、热力、燃气及水生产和供应业",
        "教育",
        "卫生和社会工作",
        "交通运输、仓储和邮政业",
        "居民服务、修理和其他服务业",
        "批发和零售业",
        "住宿和餐饮业",
        "房地产业",
        "文化、体育和娱乐业",
        "军队",
      ];
      // 组织数据
      var table = [];
      for (var i = 0; i < 16; i++) {
        var temp2 = {
          aim: "1",
          item: "1",
          num: "1",
        };
        table[i] = temp2;
      }
      for (let index = 0; index < 16; index++) {
        table[index].aim = title[index];
        table[index].item = title[index];
        table[index].num = temp[index];
      }
      return table;
    },
    fune_tine(table) {
      // 全初始化为0
      var res = [];
      for (let i = 0; i < table.length; i++) {
        var temp = {};
        temp.name = table[i].item;
        temp.value = table[i].num;
        res.push(temp);
      }
      return res;
    },
    funetine_legend(table) {
      var business = 0;
      var company = 0;
      for (let i in table) {
        let num = table[i].num;
        if (table[i].aim == "信息传输、软件和信息技术服务业") {
          business = business + num;
        } else if (table[i].aim == "金融业") {
          company = company + num;
        } else if (table[i].aim == "公共管理、社会保障和社会组织") {
          company = company + num;
        } else if (table[i].aim == "科学研究和技术服务业") {
          company = company + num;
        } else if (table[i].aim == "电力、热力、燃气及水生产和供应业") {
          company = company + num;
        } else if (table[i].aim == "教育") {
          company = company + num;
        } else if (table[i].aim == "卫生和社会工作") {
          company = company + num;
        } else if (table[i].aim == "交通运输、仓储和邮政业") {
          company = company + num;
        } else if (table[i].aim == "居民服务、修理和其他服务业") {
          company = company + num;
        } else if (table[i].aim == "批发和零售业") {
          company = company + num;
        } else if (table[i].aim == "住宿和餐饮业") {
          company = company + num;
        } else if (table[i].aim == "房地产业") {
          company = company + num;
        } else if (table[i].aim == "文化、体育和娱乐业") {
          company = company + num;
        } else if (table[i].aim == "军队") {
          company = company + num;
        }
      }
      // 组合成最终的结果
      var res = [];
      var legend = ["信息传输、软件和信息技术服务业", "其他"];
      for (let i in legend) {
        var temp = {};
        temp.name = legend[i];
        if (legend[i] == "信息传输、软件和信息技术服务业") {
          temp.value = business;
        } else {
          temp.value = company;
        }
        res.push(temp);
      }
      return res;
    },
    get_industry(start, end) {
      this.axios({
        url: "grad/org_industry",
        method: "get",
        params: {
          start: start,
          end: end,
        },
        headers: {
          "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
        },
      })
        .then((res) => {
          if (this.type == 1) {
            //本科生
            var temp_data = res.data.data.bachelor;
          } else {
            //研究生
            var temp_data = res.data.data.master;
          }
          var temp = this.count_kind(temp_data);
          var table = this.get_dict(temp);
          res = this.fune_tine(table);
          console.log(res)
          this.tabledata = res;
          var legend = this.funetine_legend(table);
          this.maintype = legend;
          this.drawChart();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    drawChart() {
      this.myChart = echarts.init(document.getElementById("mainone"));
      let that = this;
      this.myChart.setOption({
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        legend: {
          data: [
            "信息传输、软件和信息技术服务业",
            "金融业",
            "公共管理、社会保障和社会组织",
            "科学研究和技术服务业",
            "制造业",
            "电力、热力、燃气及水生产和供应业",
            "教育",
            "卫生和社会工作",
            "交通运输、仓储和邮政业",
            "居民服务、修理和其他服务业",
            "批发和零售业",
            "住宿和餐饮业",
            "房地产业",
            "文化、体育和娱乐业",
            "军队",
          ],
        },
        grid: {
          height: 550,
          containLabel: true,
        },
        series: [
          {
            name: "行业分布",
            type: "pie",
            center: ["50%", "70%"],
            radius: ["45%", "60%"],
            labelLine: {
              length: 30,
            },
            label: {
              formatter: " {b|{b}：}{c}  {per|{d}%}  ",
              backgroundColor: "#F6F8FC",
              borderColor: "#8C8D8E",
              borderWidth: 1,
              borderRadius: 4,
              rich: {
                a: {
                  color: "#6E7079",
                  lineHeight: 15,
                  align: "center",
                },
                hr: {
                  borderColor: "#8C8D8E",
                  width: "100%",
                  borderWidth: 1,
                  height: 0,
                },
                b: {
                  color: "#4C5058",
                  fontSize: 14,
                  fontWeight: "bold",
                  lineHeight: 25,
                },
                per: {
                  color: "#fff",
                  backgroundColor: "#4C5058",
                  padding: [3, 4],
                  borderRadius: 4,
                },
              },
            },
            data: that.tabledata,
          },
        ],
      });
      window.onresize = () => {
        this.myChart.resize();
      };
    },
  },
};
</script>

<style scope></style>
